<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Echart } from '@/components/Echart'
import { EChartsOption } from 'echarts'
import { domainOptions } from './echarts-data'
import GroupBox from './../components/group-box.vue'
import { useRouter } from 'vue-router'
import {getFlyStatusInfo,getTaskList} from '@/api/home'

const router = useRouter()
import { set } from 'lodash-es'

const list_con = ref(null)
const order_bd = ref(null)
const taskList =ref(
//   [
//   {
//     time: '08:00',
//     source: '机场平台', //来源
//     type: '单次计划',
//     airport: '芦淞区机场', //机场
//     airline: '1号航线' //航线
//   },
//   {
//     time: '08:30',
//     source: '河湖长系统', //河湖长系统，高速公路系统，林场平台，航道巡检，巡检云，大气监测，贵州大屏，宁乡大屏
//     type: '周期计划',
//     airport: '大疆机场', //2号机场，5号机场，
//     airline: '东吉湖河道' //工地巡检，超短航线，2号航线
//   },
//   {
//     time: '09:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '雨花街道' //工地巡检，超短航线，2号航线
//   },
//   {
//     time: '09:30',
//     source: '高速公路系统',
//     type: '单次计划',
//     airport: '芦淞区机场',
//     airline: '机场航线'
//   },
//   {
//     time: '10:00',
//     source: '林场平台',
//     type: '单期计划',
//     airport: '2号机场',
//     airline: '超短航线'
//   },
//   {
//     time: '10:30',
//     source: '巡检云',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '3楼航线'
//   },
//   {
//     time: '11:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '1号航线'
//   },
//   {
//     time: '11:30',
//     source: '贵州大屏',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '2号航线'
//   },
//   {
//     time: '12:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '1号航线'
//   },
//   {
//     time: '12:30',
//     source: '河湖长',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '江宁街道'
//   },
//   {
//     time: '13:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '东山街道'
//   },
//   {
//     time: '13:30',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '2号机场',
//     airline: '2号航线'
//   },
//   {
//     time: '14:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '1号航线'
//   },
//   {
//     time: '14:30',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '1号航线'
//   },
//   {
//     time: '15:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '2号航线'
//   },
//   {
//     time: '15:30',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '大疆机场',
//     airline: '1号航线'
//   },
//   {
//     time: '16:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '2号机场',
//     airline: '5楼航线'
//   },
//   {
//     time: '16:30',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '芦淞区机场',
//     airline: '芦淞区航线'
//   },
//   {
//     time: '17:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '1号航线'
//   },
//   {
//     time: '17:30',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '1号航线'
//   },
//   {
//     time: '18:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '云台山河谷里'
//   },
//   {
//     time: '18:30',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '5号机场',
//     airline: '湖熟街道航线'
//   },
//   {
//     time: '19:00',
//     source: '机场平台',
//     type: '周期计划',
//     airport: '2号机场',
//     airline: '路口街道航线'
//   }
// ]
)

// 轮播动画
const animation = (num, step, nowTop) => {
  // console.log(num,step,nowTop)
  setTimeout(() => {
    if (nowTop < num) {
      nowTop += 1
      list_con.value.style.marginTop = '-' + nowTop + 'px'
      animation(num, step, nowTop)
    } else {
      animation(num, step, 0)
    }
  }, step)
}
const flyInfo=ref({flightCount:0,distanceCount:0,flyTimeCount:0})
const getTask=async()=>{
  const res=await getTaskList()
  taskList.value=res.data
  
}
const getFlyInfo=async()=>{
  // 获取飞行信息
  const res=await getFlyStatusInfo()
  flyInfo.value.flightCount=res.data.flightCount
  flyInfo.value.distanceCount=res.data.distanceCount
  flyInfo.value.flyTimeCount=res.data.flyTimeCount
}
onMounted(async() => {
  getDomain()
  setTimeout(() => {
    const order_bd_H = order_bd.value.offsetHeight
    const list_con_H = list_con.value.offsetHeight
    if (list_con_H > order_bd_H) {
      animation(list_con_H - order_bd_H, 50, 0)
    }
  }, 1000)
  // 获取飞行信息
  getFlyInfo()
  //获取任务列表
  getTask()
})

// 各领域数据统计
const domainOptionsData = reactive<EChartsOption>(domainOptions) as EChartsOption
const bookList = [
  {
    typeName: '水利领域',
    bnum: 235
  },
  {
    typeName: '交通领域',
    bnum: 174
  },
  {
    typeName: '低空网格化',
    bnum: 280
  },
  {
    typeName: '其他',
    bnum: 200
  }
]

// const taskList=ref([])
const getDomain = () => {
  setTimeout(() => {
    const { category, lineData } = filterData(bookList)
    set(domainOptionsData, 'xAxis.data', category)
    domainOptionsData!.series![0].data = lineData
  }, 500)
}

const filterData = (data, category: string[] = [], lineData: number[] = []) => {
  //过滤后端数据，分别变成X轴数组和Y轴数组
  data.forEach((item) => {
    item.typeName = item.typeName.length > 2 ? item.typeName.substring(0, 4) : item.typeName
    category.push(item.typeName || '')
    lineData.push(item.bnum || 0)
  })
  return {
    category,
    lineData
  }
}
const handleClick = (item) => {
  // router.push({ path: '/bit-screen/control', query: { name: item.airport } })
  router.push({ path: '/bit-screen/control', query: { name: item.aname,id:item.aid } })
}

</script>

<template>
  <div class="rt-con">
    <div class="stats">
      <div class="stats_group">
        <img class="icon" src="@/assets/bit-screen/stats_icon.png" alt="" />
        <h4 class="title">飞行总架数</h4>
        <p class="quantity">{{ flyInfo.flightCount }}<span>次</span></p>
      </div>
      <div class="stats_group">
        <img class="icon" src="@/assets/bit-screen/stats_icon.png" alt="" />
        <h4 class="title">飞行总里程</h4>
        <p class="quantity">{{ (flyInfo.distanceCount/1000).toFixed(2) }}<span>KM</span></p>
      </div>
      <div class="stats_group">
        <img class="icon" src="@/assets/bit-screen/stats_icon.png" alt="" />
        <h4 class="title">飞行总时长</h4>
        <p class="quantity">{{ (flyInfo.flyTimeCount/3600).toFixed(2) }}<span>H</span></p>
      </div>
    </div>
    <GroupBox :title="`各领域数据统计`" boxHeight="37%">
      <Echart :options="domainOptionsData" height="`100%`" width="100%" />
    </GroupBox>
    <GroupBox :title="`当天机场任务列表`" style="height: calc(100% - 33.33% - 28%)">
      <!-- <div class="order_list_box">
        <div class="order_hd">
          <span class="td">任务时间</span>
          <span class="td">任务来源</span>
          <span class="td">类型</span>
          <span class="td">机场</span>
          <span class="td">航线</span>
        </div>
        <div class="order_bd" ref="order_bd">
          <div class="list_con" ref="list_con">
            <div class="row" v-for="(item, index) in taskList" :key="index">
              <span class="td text-over" >{{ item.time }}</span>
              <span class="td text-over">{{ item.source }}</span>
              <span class="td">{{ item.type}}</span>
              <span class="td link text-over" @click="handleClick(item)">{{ item.airport }}</span>
              <span class="td text-over">{{ item.airline }}</span>
            </div>
          </div>
        </div>
      </div> -->
      <div class="order_list_box">
        <div class="order_hd">
          <span class="td">任务时间</span>
          <span class="td">任务来源</span>
          <span class="td">类型</span>
          <span class="td">机场</span>
          <span class="td">航线</span>
        </div>
        <div class="order_bd" ref="order_bd">
          <div class="list_con" ref="list_con">
            <div class="row" v-for="(item, index) in taskList" :key="index">
              <span class="td text-over" >{{ item.createTime }}</span>
              <span class="td text-over">{{ item.taskSourceName }}</span>
              <span class="td">{{ item.type==1?'单次任务':'周期任务' }}</span>
              <span class="td link text-over" @click="handleClick(item)">{{ item.aname }}</span>
              <span class="td text-over">{{ item.airlineFileName }}</span>
            </div>
          </div>
        </div>
      </div>
    </GroupBox>
  </div>
</template>

<style lang="less" scoped>
.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}
.rt-con {
  // border: 1px solid blueviolet;
  width: 23%;
  max-width: 460px;
  min-width: 300px;
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 3.5%;
    min-height: 18%;
    min-height: 22%;
    .stats_group {
      text-align: center;  
      background: url('@/assets/bit-screen/stats_bg.png') no-repeat;
      background-size: cover;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      justify-content: space-around;
      padding: 12% 10% 26%;

      .icon {
        margin: 10px auto 0;
        width: 50%;
        margin-bottom: 8%;
      }
      .title {
        font-size: 0.9vw;
        font-size: 14px;
        // margin-bottom: 10px;
        margin-bottom: 6%;

      }
      .quantity {
        display: block;
        font-size: 18px;
        font-size: 1vw;
        text-align: center;
        font-weight: 600;
        color: #FFFFFF;
        background: linear-gradient(180deg,  #ffffff 0%,#ffffff  30%,#1698F3  100%,);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        span {
          font-size: 14px;
        }
      }
    }
  }
  .order_list_box {
    width: calc(100% + 20px);
    overflow: hidden;
    margin: -10px;
    display: flex;
    flex-direction: column;
    .order_hd {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      background: rgb(28 104 172 / 30%);
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #2b7cb5;
      .td {
        font-size: 12px;
      }
    }
    .order_bd {
      overflow-x: hidden;
      overflow-y: auto;
      flex: 1;
      .list_con {
        .row {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          &:hover,
          &:hover:nth-child(2n) {
            background: rgb(28 104 172 / 70%);
          }
          &:nth-child(2n) {
            background: rgb(28 104 172 / 30%);
          }
        }
      }
    }
    .td {
      padding: 0 5px;
      line-height: 36px;
      height: 36px;
      font-size: 12px;
      text-align: center;
      &.link {
        color: #4c8ddb;
        cursor: pointer;
      }
    }
    ::-webkit-scrollbar {
      width: 3px; /* 设置滚动条的宽度 */
    }

    ::-webkit-scrollbar-thumb {
      background-color: #67ace5; /* 设置滚动条滑块的颜色 */
      border-radius: 5px; /* 设置滚动条滑块的圆角 */
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #366a93; /* 设置滚动条滑块在悬停时的颜色 */
    }

    ::-webkit-scrollbar-track {
      background-color: rgb(0, 0, 0/0); /* 设置滚动条背景的颜色 */
    }
  }
}
@media screen and (max-width: 1600px) {
  .stats {
    grid-column-gap: 2%;
  }
}
</style>
